<template>
  <form class="mui-input-group">
    <div class="mui-input-row">
      <label class="title">收件人</label>
      <input
        type="text"
        v-model="form.name"
        class="mui-input-clear"
        placeholder="请输入收件人"
      />
    </div>
    <div class="mui-input-row">
      <label class="title">联系方式</label>
      <input
        type="text"
        v-model="form.tel"
        class="mui-input-clear"
        placeholder="请输入手机号"
      />
    </div>
    <div class="mui-input-row">
      <label class="title">所在地区</label>
      <input
        type="text"
        v-model="form.area"
        class="mui-input-clear"
        placeholder="请选择所在地区"
        @click="choose"
      />
      <!-- @province 选择省份的时候触发 其他的同理 后三个是绑定 -->
      <div class="divwrap">
        <div class="mask" v-show="show" @click="choose"></div>
        <v-distpicker
          type="mobile"
          v-show="show"
          @province="onChangeProvince"
          @city="onChangeCity"
          @area="onChangeArea"
          :province="addressInfo.province"
          :city="addressInfo.city"
          :area="addressInfo.area"
        ></v-distpicker>
      </div>
    </div>
    <div class="mui-input-row">
      <label class="title"> 详细地址</label>
      <input
        type="text"
        v-model="form.detail"
        class="mui-input-clear"
        placeholder="请输入详细地址"
      />
    </div>
    <div class="mui-button-row">
      <button
        @click="save"
        type="button"
        class="mui-btn mui-btn-primary mui-btn-block"
      >
        确认
      </button>
      <button
        v-show="id"
        @click="del"
        type="button"
        class="mui-btn mui-btn-danger mui-btn-block"
      >
        删除
      </button>
    </div>
  </form>
</template>

<script>
import VDistpicker from "v-distpicker";
export default {
  data() {
    return {
      addressInfo: {
        province: "",
        city: "",
        area: "",
      },

      form: {
        name: "",
        tel: "",
        area: "",
        detail: "",
      },
      show: false,
    };
  },

  components: {
    "v-distpicker": VDistpicker,
  },
  props: ["id"],
  created() {
    this.getAddress();
  },
  methods: {
    del() {
      // 发送请求完成收获地址的操作
      this.$http.post("address/del", { id: this.id }).then((res) => {
        if (res.data.code === 0) {
          this.$toast(res.data.msg);
        } else if (res.data.code === 1) {
          this.$toast(res.data.msg), this.$router.go(-1); //删除成功返回列表界面
        } else if (res.data.code === 2) {
          this.$router.push("/user/login"); //未登录 跳转登录界面
        }
      });
    },
    getAddress() {
      if (!this.id) return;
      // 根据id 获取得到了编辑的数据 ,但是我在做新增的时候 并不会传id进来 所以要编辑的方案要在新增的时候要跳过
      this.$http
        .get("address/edit", { params: { id: this.id } })
        .then((res) => {
          if (res.data.data === 0) {
            this.$toast(res.data.msg);
          } else if (res.data.code === 1) {
            this.form = res.data.data; //双向绑定
          } else if (res.data.code === 2) {
            this.$router.push("/user/login");
          }
        });
    },
    save() {
      // 接口： 如果有传入id 属性 执行编辑 若是没有传入 id  默认新增
      // 接口 通过确认 传递所有的input内容到后端 并在adress的created 中调用新的接口获取
      this.form.id = this.id; //只有编辑的时候 路径才会传入一个id值 否则为undefined
      // 检查 输入是否为空

      // 制作新增收货地址
      this.$http.post("address/save", this.form).then((res) => {
        if (res.data.code === 0) {
          this.$toast(res.data.msg); //新增失败 显示提示信息
          // 新增失败
        } else if (res.data.code === 1) {
          this.$toast(res.data.msg);
          this.$router.go(-1);
          // 新增成功 回到收货地址列表页面
        } else if (res.data.code === 2) {
          // 没有登录,导航至登录页面
          this.$router.push("/user/login");
        }
      });
    },

    onChangeProvince(data) {
      this.addressInfo.province = data.value;
    },
    onChangeCity(data) {
      this.addressInfo.city = data.value;
    },
    onChangeArea(data) {
      this.addressInfo.area = data.value;
      this.form.area =
        this.addressInfo.province +
        "-" +
        this.addressInfo.city +
        "-" +
        this.addressInfo.area; //在我们选择完区域之后 就把这个省份 拼接 并放到 area中
      this.show = false; //填完之后隐藏掉
    },
    choose() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="scss" scoped>
.mui-input-group .mui-button-row {
  height: auto;
}
.mui-input-clear {
  font-size: 14px;
}
.mui-input-group:before {
  list-style: none;
}
.mui-button-row {
  margin-top: 20px;
  button {
    margin: 20px 0;
    padding: 10px 0;
  }
}
.tit {
  color: #999;
}
input::-webkit-input-placeholder {
  color: #999;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999;
}
.divwrap > .mask {
  background: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.divwrap > .distpicker-address-wrapper {
  color: #999;
  background: #fff;
  border-top: 1px solid #ccc;
  z-index: 1;
  height: 300px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>